<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-07-25 17:10:32
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-13 15:25:58
 * @FilePath: /bmxt/src/views/enroll/detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "@/api/api.js";

const route = useRoute();
const router = useRouter();
const activityId = ref(route.query.id);
const activityDetail = ref([]); //当前id的活动详情数据
const isRegister = ref(0); //0未报名，1已报名
//获取活动详情
const getActivityDetail = async () => {
  const params = {
    id: activityId.value,
  };
  activityDetail.value = await api.getActivityDetail(params);
  isRegister.value = activityDetail.value.isReg;
};

getActivityDetail();

//跳转报名页面
const toEnroll = (id, price, status, path) => {
  router.push({
    path,
    query: {
      id: id,
      price: price,
      status: status,
    },
  });
};
</script>

<template>
  <div class="enroll-container">
    <header>{{ activityDetail.title }}</header>
    <main>
      <div class="img-box">
        <img :src="activityDetail.detailImg" alt="" />
      </div>
    </main>
    <footer>
      <p @click="
        toEnroll(
          activityDetail.id,
          activityDetail.price,
          activityDetail.status,
          activityDetail.path
        )
        " class="btn">
        {{ isRegister === 0 ? "立即报名" : "查看报名详情" }}
      </p>
    </footer>
  </div>
</template>

<style scoped lang="less">
@import url("@/styles/enroll/detail");
</style>
